<!--
 * @Author: your name
 * @Date: 2021-08-24 10:47:09
 * @LastEditTime: 2021-09-05 14:52:42
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \bigdate\src\views\Contents\page.vue
-->
<template>
    <div>
        <Row :gutter="[11, 11]">
            <Col :md="{ span: 24 }" :xs="{ span: 24 }" :lg="{ span: 18 }">
                <Row :gutter="[11, 11]">
                     <Col :md="{ span: 24 }" :xs="{ span: 24 }" :lg="{ span: 24 }">
                        <Card :loading="loading">
                               <div class="hometitle">
                                  <h3>晚上好，Vbeer！愿你天黑有灯，下雨有伞</h3>
                                     <p class="usertag">作者寄语：人生如逆旅，我亦是行人，欢迎使用Elk-Admin,目前系统支持三种主题，多种图表展示，并支持中英文切换，响应式布局。最后不管解决是怎样的，但至少自己努力过！</p>
                                </div>      
                        </Card>
                    </Col>
                    <Col
                        v-for="(item, index) in cardlist"
                        :key="index"
                        :md="{ span: 24 }"
                        :xs="{ span: 24 }"
                        :lg="{ span: 8 }"
                    >
                        <V-numCard
                            :loading="loading"
                            :title="item.title"
                            :value="item.value"
                            :img="item.imgSrc"
                        ></V-numCard>
                    </Col>
                    <Col :md="{ span: 24 }" :xs="{ span: 24 }" :lg="{ span: 8 }">
                        <V-echart
                            tag="每年统计"
                            title="每年统计"
                            :loading="loading"
                            :datas="dataobj1"
                        ></V-echart>
                    </Col>
                    <Col :md="{ span: 24 }" :xs="{ span: 24 }" :lg="{ span: 16 }">
                        <V-echart
                            tag="每日统计"
                            title="每日统计"
                            :loading="loading"
                            :datas="dataobj4"
                        ></V-echart>
                    </Col>

                </Row>
            </Col>
            <Col :md="{ span: 24 }" :xs="{ span: 24 }" :lg="{ span: 6 }">
                <Card :loading="loading" class="timeline">
                    <template #title>
                        <div class="timetitle">
                            <div>更新记录</div>
                            <div>
                                <Tag color="pink"> 最后更新于2021/9/5 </Tag>
                            </div>
                        </div>
                    </template>
                    <div class="timeContent">
                        <V-timeline :datas="updata"></V-timeline>
                    </div>
                </Card>
            </Col>
        </Row>
    </div>
</template>
<script lange="ts">
import { Row, Col, Card, Tag } from 'ant-design-vue'
import { defineComponent, unref, computed, ref, reactive, toRaw } from 'vue'
import VNumCard from './components/NumCard.vue'
import VEchart from '../../../components/echarts/EchartsTEmp.vue'
import { homeline, SeleData, homeSource } from '../../../mock/echartdatas'
import VTimeline from '../../../components/Timeline/Timeline.vue'
import img1 from '@/assets/image/download.png'
import img2 from '@/assets/image/link.png'
import img3 from '@/assets/image/use.png'
// 由于 vue3.0 使用 Rullop构建 所以不支持 requir 使用本地动态图片需要import引入
// 引入更新数据
import { updatalist } from '../../../mock/updatelist'

export default defineComponent({
    name: 'IndexPage',
    components: {
        Row,
        Col,
        VNumCard,
        VEchart,
        Card,
        VTimeline,
        Tag,
    },
    setup() {
        let cardlist = toRaw < Array > null
        let loading = ref()
        // 顶部卡片数据
        cardlist = [
            {
                title: '使用量',
                value: 99,
                imgSrc: img1,
            },
            {
                title: '访问量',
                value: 99,
                imgSrc: img2,
            },
            {
                title: '下载量',
                value: 99,
                imgSrc: img3,
            },
        ]
        // 图表数据
        let dataobj1 = ref()
        dataobj1.value = SeleData
        let dataobj4 = ref()
        dataobj4.value = homeSource
        // loading
        loading.value = true
        setInterval(() => {
            loadfun()
        }, 1000)
        const loadfun = () => {
            loading.value = false
        }
        // 更新列表数据
        let updata = updatalist
        return {
            cardlist,
            loading,
            dataobj1,
            dataobj4,
            updata,
        }
    },
})
</script>
<style lang="less" scoped>
@import "../../../styles/pagestyle.less";
.hometitle{
        .usertag{
            font-size: 12px;
        }
}

.domes {
  width: 100%;
  height: 200px;

  background: #ccc;
}
.timeline {
  height: 100%;
  .timeContent {
    height: 80vh;
    overflow-y: scroll;
    padding: 10px 0;
  }
  .timetitle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    & > div {
      font-size: 12px;
      color: #666;
    }
  }
}
::-webkit-scrollbar-track {
  background-color: rgba(247, 244, 244, 0);
}

::-webkit-scrollbar-thumb {
  // background: rgba(0, 0, 0, 0.6);
  background-color: rgba(144, 147, 153, 0);
  // background-color: rgba(144, 147, 153, 0.3);
  border-radius: 2px;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0);
}
</style>
